<!--
* @Description SubComponent 子组件
* @author 三咲问道
* @date 2025/6/5
-->
<template>
  <div class="SubComponent">
    <div>这是子组件__{{ count }}</div>
    <el-button type="primary" @click="add">加一</el-button>
    <el-button type="primary" plain @click="minus">减一</el-button>
    <SubComponent_2 @add_2="add" @minus_2="minus"></SubComponent_2>
  </div>
</template>

<script setup lang="ts">
import {toRefs} from "vue";
import SubComponent_2 from './SubComponent_2.vue'

const props = defineProps({
  count: Number
})
const {count} = toRefs(props)

let $emit = defineEmits(['add_1', 'minus_1'])

const add = () => {
  $emit('add_1')
}
const minus = () => {
  $emit('minus_1')
}

</script>

<style scoped lang="less">
.SubComponent {
  text-align: center;
  font-size: 20px;
  height: 300px;
  margin: 12px 160px;
  background-color: #9bbbac;
}
</style>